<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <link rel="stylesheet" href="../js/bootstrap/css/bootstrap.min.css">
    <link rel="icon" href="../js/shop/assets/img/favicon.ico">
    <link rel="stylesheet" type="text/css" href="../js/shop/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/pages-JD-index.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="../js/shop/css/widget-cartPanelView.css" />
    <title>商城首页</title>
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">火罗国管理系统</a>
        </div>

        <ul class="nav navbar-nav navbar-right" id="nickDiv">
            <li><a href="login.html">登录</a></li>
            <li><a href="reg.html">注册</a></li>
        </ul>
    </div>
</nav>

<div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
        <!--头部-->
        <div class="header">
            <div class="py-container">
                <div class="yui3-g NavList">
                    <div class="yui3-u Left all-sort">
                        <h4>全部商品分类</h4>
                    </div>
                    <div class="yui3-u Center navArea">
                        <ul class="nav">
                            <li class="f-item">服装城</li>
                            <li class="f-item">美妆馆</li>
                            <li class="f-item">品优超市</li>
                            <li class="f-item">全球购</li>
                            <li class="f-item">闪购</li>
                            <li class="f-item">团购</li>
                            <li class="f-item">有趣</li>
                        </ul>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>

<!--列表-->
<div class="sort">
    <div class="py-container">
        <div class="yui3-g SortList ">
            <div class="yui3-u Left all-sort-list">
                <div class="all-sort-list2" id="cateDiv">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">

    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">商品列表</div>
                <div class="panel-body">
                    <div class="row" id="productListDiv">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" >
        <div class="col-md-12">
            <div class="panel panel-success">
                <div class="panel-heading">热销品牌</div>
                <div class="panel-body" id="brandListDiv">

                </div>
            </div>
        </div>
    </div>
</div>

<!--缩略图模板-->
<div id="productDiv" style="display: none">
    <div class="col-sm-6 col-md-3" >
        <div class="thumbnail">
            <img src="##imgUrl##" style="width: 100px;height: 100px;">
            <div class="caption">
                <h3 style="color: red">￥##price##</h3>
                <p>##productName##</p>
                <p><a href="#" class="btn btn-primary" role="button" onclick="buy('##productId##')">立即购买</a> <a href="#" class="btn btn-default" role="button" onclick="buyCart('##productId##')">加入购物车</a></p>
            </div>
        </div>
    </div>
</div>

<!--修改密码弹框-->
<div id="updateAlertDiv" style="display: none">
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">原密码:</label>
            <div class="col-sm-8">
                <input type="password" id="oldPwd" class="form-control"  placeholder="请输入原密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">新密码:</label>
            <div class="col-sm-8">
                <input type="password" id="newPwd" class="form-control"  placeholder="请输入新密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">确认密码:</label>
            <div class="col-sm-8">
                <input type="password" id="confirmPwd" class="form-control"  placeholder="再次输入新密码">
            </div>
        </div>
    </form>
</div>


<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/shop/js/pages/index.js"></script>
<script src="../js/bootbox/bootbox.min.js"></script>
<script src="../js/bootbox/bootbox.locales.min.js"></script>
<script src="../js/common.js"></script>
<script>
    var v_token;
    $(function () {
        v_token = sessionStorage.getItem(TOKEN);
        // var parseJSON = utf8to16(base64decode(v_token.split('.')[0]));//base64解密
        // var nickNameJson = JSON.parse(parseJSON) //字符串转json
        initCate();
        initProduct();
        loginNick();
    })

    //立即购买
    function buy(id){
        var v_param = {};
        v_param.productId = id;
        v_param.count = 1;
        $.ajax({
            type:"post",
            url:API_URL+"carts",
            data: v_param,
            beforeSend:function (xhr){
                xhr.setRequestHeader(X_AUTH,v_token);
            },
            success:function (res){
                if (res.code == 200){
                    location.href = "cart.html";
                }
            }
        })
    }

    //加入购物车
    function buyCart(id){
        var v_param = {};
        v_param.productId = id;
        v_param.count = 1;
        $.ajax({
            type:"post",
            url:API_URL+"carts",
            data: v_param,
            beforeSend:function (xhr){
                xhr.setRequestHeader(X_AUTH,v_token);
            },
            success:function (res){
                if (res.code == 200){
                    // cartCount();
                    loginNick();
                }else {
                    alert(res.msg);
                }
            }
        })
    }

    //登录昵称
    function loginNick(){
        if (v_token){
            $.ajax({
                type:"get",
                url:API_URL+"member",
                beforeSend:function (xhr){
                    xhr.setRequestHeader(X_AUTH,v_token);
                },
                success:function (res){
                    if (res.code == 200){
                        var v_count = res.data.count;
                        if (v_count == null){
                            v_count = 0;
                        }

                        var v_html = '';
                        v_html += '  <li><a href="#">欢迎<font color="blue">'+res.data.name+'</font>登录</a></li>\n' +
                            '            <li><a href="#" onclick="logout()">注销</a></li>\n' +
                            '            <li><a href="#" onclick="editPwd()">修改密码</a></li>'+
                            '            <li><a href="pay.html">我的订单</a></li>'+
                            '            <li><a href="cart.html">我的购物车(<i id="cart" style="color: red">'+v_count+'</i>)</a></li>'
                            // '            <li><a href="cart.html">我的购物车(<i id="cart" style="color: red">0</i>)</a></li>'
                        $("#nickDiv").html(v_html);

                        //查询购物车数量
                        // cartCount();
                    }
                }
            })
        }
    }

    //购物车数量
    function cartCount(){
        if (v_token) {
            $.ajax({
                type: "get",
                url: API_URL + "carts/count",
                beforeSend: function (xhr) {
                    xhr.setRequestHeader(X_AUTH, v_token);
                },
                success:function (res){
                    console.log(res)
                    if (res.code == 200){
                        $("#cart").html(res.data);
                    }
                }
            })
        }
    }

    //注销
    function logout(){
        if (v_token){
            $.ajax({
                type:"post",
                url:API_URL+"member/logout",
                beforeSend:function (xhr){
                    xhr.setRequestHeader(X_AUTH,v_token);
                },
                success:function (res){
                    if (res.code == 200){
                        //清空Storage
                        sessionStorage.removeItem(TOKEN);
                        //刷新页面
                        location.href="index.html";
                    }
                }
            })
        }
    }

    //修改密码
    function editPwd(){
        if (v_token){
            //备份修改弹框
            var backupsUpdateAlertDiv = $("#updateAlertDiv").html();
            var updatePwdDiv = bootbox.dialog({
                title:"<b>修改密码</b>",
                message:$("#updateAlertDiv form"),//另一种方式.children()
                size:"normal",
                buttons: {
                    confirm: {
                        label: '<span class="glyphicon glyphicon-ok"></span>确定',
                        className: 'btn-info',
                        callback:function (result){
                            var v_param = {};
                            v_param.oldPwd = $("#oldPwd", updatePwdDiv).val();
                            v_param.newPwd = $("#newPwd", updatePwdDiv).val();
                            v_param.confirmPwd = $("#confirmPwd", updatePwdDiv).val();
                            $.ajax({
                                type:"post",
                                url:API_URL+"member/editPwd",
                                data:v_param,
                                beforeSend:function (xhr){
                                    xhr.setRequestHeader(X_AUTH,v_token);
                                },
                                success:function (res){
                                    if (res.code == 200){
                                        //清空Storage
                                        sessionStorage.removeItem(TOKEN);
                                        //刷新页面
                                        location.href="index.html";
                                    }else (
                                        // 提示
                                        bootbox.alert({
                                            message: "<span class='glyphicon glyphicon-exclamation-sign'></span>"+res.msg,
                                            size: 'small',
                                            title: "提示信息"
                                        })
                                    )
                                }
                            })
                        },
                    },
                    cancel: {
                        label: '<span class="glyphicon glyphicon-remove"></span>取消',
                        className: 'btn-danger'
                    }
                },

            })
            //还原修改弹框
            $("#updateAlertDiv").html(backupsUpdateAlertDiv);
        }
    }



    //初始化样式
    function initCss() {
        $('.all-sort-list2 > .item').hover(function() {
            //父类分类列表容器的高度

            $(this).addClass('hover');
            $(this).children('.item-list').css('display', 'block');
        }, function() {
            $(this).removeClass('hover');
            $(this).children('.item-list').css('display', 'none');
        });

        $('.item > .item-list > .close').click(function() {
            $(this).parent().parent().removeClass('hover');
            $(this).parent().hide();
        });
    }

    var v_cateList
    var v_html = '';
    function initCate(){
        if (v_token){
            $.ajax({
                type:"get",
                url:API_URL+"cates",
                //传递请求头
                beforeSend:function (xhr){
                    xhr.setRequestHeader(X_AUTH,v_token);
                },
                success:function (res){
                    if (res.code == 200){
                        v_cateList = res.data;

                        //填充内容
                        cateHtml1();
                        $("#cateDiv").html(v_html);
                        initCss();

                    }
                }
            })
        }
    }

    //拼接一级菜单
    function cateHtml1(){
        var v_cateArr = findChild(0);
        for (let v_cate of v_cateArr){
            v_html += '<div class="item">\n' +
                '                        <h3><a href="">'+v_cate.cateName+'</a></h3>\n' +
                '                        <div class="item-list clearfix">\n' +
                '                            <div class="subitem">'
            cateHtml2(v_cate.id);
            v_html += '</div></div></div>';
        }
    }

    //拼接二级菜单
    function cateHtml2(id){
        var v_cateArr = findChild(id);
        for (let v_cate of v_cateArr){
            v_html += '<dl class="fore1">\n' +
                '              <dt><a href="">'+v_cate.cateName+'</a></dt>\n' +
                '              <dd>';
            cateHtml3(v_cate.id);
            v_html += '</dd></dl>';
        }
    }

    //拼接三级菜单
    function cateHtml3(id){
        var v_cateArr = findChild(id);
        for (let v_cate of v_cateArr){
            v_html += '<em><a href="">'+v_cate.cateName+'</a></em>';
        }
    }

    //查询子级
    function findChild(id){
        var v_cateArr = []
        for (let v_cate of v_cateList){
            if (id == v_cate.fatherId){
                v_cateArr.push(v_cate);
            }
        }
        return v_cateArr;
    }

    //商品
    function initProduct(){
        $.ajax({
            type:"get",
            url:API_URL+"/products",
            success:function (res){
                if (res.code == 200){
                    var v_productList = res.data;
                    var v_html = "";
                    for (let v_product of v_productList){
                        v_html += $("#productDiv").html().replace(/##price##/g,v_product.price)
                        .replace(/##productName##/g,v_product.productName)
                        .replace(/##imgUrl##/g,v_product.mainImage)
                        .replace(/##productId##/g,v_product.id)
                    }
                    $("#productListDiv").html(v_html);
                }
            }
        })
    }
    
</script>
</body>
</html>